<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="../../jquery-learn/js/jquery-2.1.1.js"></script>

</head>
<body>

<form>
    <input type="email" placeholder="email" name="email" required/><br/>
    <input type="url" placeholder="url" name="url"/><br/>
    <input type="number" placeholder="number" name="number"/><br/>
    <input type="range" placeholder="range" name="range" min="1" max="10" step="0.1"/>
    <output onforminput="value=range.value">xxx</output>

    <span class="rangeValue"></span>
    <br/>
    <input type="date" placeholder="date" name="date"/><br/>

    Webpage: <input type="url" list="url_list" name="link"/><br/>
    <datalist id="url_list">
        <option label="W3School" value="http://www.W3School.com.cn"/>
        <option label="Google" value="http://www.google.com"/>
        <option label="Microsoft" value="http://www.microsoft.com"/>
    </datalist>

    <input type="zoneCode" placeholder="[0-9][A-z]{3}" name="zoneCode" pattern="[0-9][A-z]{3}"/><br/>
    <input type="submit"/>
</form>

<script type="text/javascript">
    $(function () {
        console.log('ready');
        var emailEle = $('input[name=email]')[0];
        emailEle.oninvalid = function (e) {
            if (!e.target.validity.valid) {
                e.target.setCustomValidity("请输入正确的email");
            }
        };
        emailEle.oninput = function (e) {
            e.target.setCustomValidity("请输入正确的email");
        };
    });


    $('input[name=range]').on('change', function () {
        console.log('aa');
        console.log(this.value);
        $('.rangeValue').text(this.value);
//        $('.rangeValue').val(this.value);
    });
</script>
</body>
</html>